<template>
	<view class="page">
		<view class="bg">
			<!-- <image src="../../static/images/walletBg.png" ></image> -->
			<view class="box">
				<view class="text f26">我的余额</view>
				<view class="balance">{{money?money:'0.00'}} <span class="rmb">¥</span></view>
			</view>
		</view>
		<view class="payList">

		</view>
		<view class="button" @click="openPopup">充值</view>

		<uni-popup ref="popup" type="bottom">
			<view class="uni-padding-wrap">
				<view style="background:#FFF; padding:50upx 0;">
					<view class="uni-hello-text uni-center">支付金额</text></view>
					<view class="uni-h1 uni-center uni-common-mt">
						<text class="rmbLogo">￥</text>
						<input class="price" type="number" :value="price" maxlength="4" @input="priceChange" />
					</view>
				</view>

				<view class="uni-btn-v uni-common-mt">

					<button @click="getpay(0)" :loading="loading1">支付宝支付</button>
					<button @click="getpay(1)" :loading="loading2">微信支付</button>

				</view>

			</view>
		</uni-popup>

	</view>

</template>

<script>
	let providerList = []; // 支付通道
	import uniPopup from '../../components/uni-popup';
	export default {
		data() {
			return {
				active: 0,
				money: '',
				loading1: false,
				loading2: false,
				loading: false,
				price: 1,
				payData: '',
			}
		},
		components: {
			uniPopup
		},

		//  onLoad() {
		// 	 	this.getWallet();
		//     },
		onShow() {
			this.getWallet();
		},
		onNavigationBarButtonTap(e) {
			uni.navigateTo({
			  url: "/pagesB/wallet/rechargeList"
			});
		},
		methods: {
			openPopup() {
				this.loading1 = false;
				this.loading2 = false;
				this.$refs.popup.open();
			},
			priceChange(e) {
				this.price = e.detail.value;
				console.log(e.detail.value)
			},
			orderInfoStr(index) {
				if (this.price < 1) {
					this.$toast('请输入不小于1的数值');
					return false;
				}
				let dataType = {
					payway: index,
					price: this.price,
				};
				return new Promise(reslove => {
					this.$http.getPrePayOrder(dataType).then(res => {
					  console.log("-> res", res);
						if (res.status == 200) {
							reslove(res);
						} else {
							this.$toast(res.mess);
						}
					});
				});
			},
			/**
			 * 支付
			 */
			async getpay(index) {
				let orderInfo = "";
				// if(providerList.length <= 0){
				//     this.$toast('获取支付通道失败')
				//     return false
				// }

				let requestPaymentid = "";
				if (index == 0) {
					// 支付宝支付
					requestPaymentid = 'alipay';
					console.log(' requestPaymentid' + requestPaymentid);
					console.log(orderInfo);
					orderInfo = await this.orderInfoStr(0);
					this.loading1 = true;
				} else if (index == 1) {
					// 微信支付
					requestPaymentid = 'wxpay';
					console.log(' requestPaymentid' + requestPaymentid);
					orderInfo = await this.orderInfoStr(1);
					console.log(orderInfo);
					this.loading2 = true;
				} else {

				}
				uni.requestPayment({
					provider: requestPaymentid,
					orderInfo: orderInfo.data.infos,
					success: e => {
						uni.showToast({
							title: "支付成功!"
						});
					},
					fail: e => {
						console.log("fail", e);
						this.loading1 = false;
						this.loading2 = false;
						uni.showModal({
							content: "支付失败",
							showCancel: false
						});
					},
					complete: () => {
						this.$refs.popup.close(); // 关闭
						this.loading1 = false;
						this.loading2 = false;
					}
				});
			},

			getWallet() {
				this.$http.getWallet().then(res => {
					if (res.status == 200) {
						this.money = res.data.price
					}
				})
			},
		}
	}
</script>

<style lang="less">
	.page {
		.bg {
			width: 750upx;
			height: 434upx;
			position: relative;
			background-image: linear-gradient(to right, #ff4241, #ff5b5a);

			image {
				width: 100%;
				height: 100%;
			}

			.box {
				position: absolute;
				left: 0;
				top: 0;
				bottom: 0;
				right: 0;
				color: #fff;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.text {
					line-height: 40upx;
				}

				.balance {
					font-size: 78upx;
					margin-top: 14upx;
				}

				.rmb {
					font-size: 28upx;
					margin-left: 10upx;
				}
			}
		}

		.payList {
			margin-top: 20upx;

			.payItem {
				display: flex;
				padding: 0 32upx;
				height: 100upx;
				background: #fff;
				border-bottom: 1upx solid #fbfbfb;
				justify-content: space-between;
				align-items: center;

				.label {
					display: flex;
					align-items: center;

					.icon {
						width: 38upx;
						height: 38upx;
						margin-right: 20upx;

						image {
							width: 100%;
							height: 100%;

						}
					}
				}
			}
		}

		.button {
			margin: 120upx 32upx 32upx;
			height: 88upx;
			font-size: 32upx;
			background-color: #FB403F;
		}

		.rmbLogo {
			font-size: 40upx;
		}

		button {
			background-color: #FB403F;
			border-radius: 50upx;

			color: #ffffff;
		}

		.uni-h1.uni-center {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: flex-end;
		}

		.price {
			border-bottom: 1px solid #eee;
			width: 200upx;
			height: 80upx;
			padding-bottom: 4upx;
		}

		.ipaPayBtn {
			margin-top: 30upx;
		}
	}
</style>
